<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>正则表达式 | 静思田园</title>
    <meta name="description" content="时不时记录一点点">
    <meta name="generator" content="VitePress v1.5.0">
    <link rel="preload stylesheet" href="/assets/style.D1KHeDuB.css" as="style">
    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
    <script type="module" src="/assets/chunks/metadata.d4b76d32.js"></script>
    <script type="module" src="/assets/app.Cqoht_Of.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.trnLO_3_.js">
    <link rel="modulepreload" href="/assets/chunks/theme.BNMYWj-o.js">
    <link rel="modulepreload" href="/assets/chunks/katex.BZy9Y_85.js">
    <link rel="modulepreload" href="/assets/chunks/c4Diagram-3d4e48cf.rhyfUO3k.js">
    <link rel="modulepreload" href="/assets/chunks/flowDiagram-66a62f08.BvVfKYLl.js">
    <link rel="modulepreload" href="/assets/chunks/flowDiagram-v2-96b9c2cf.rYAPEXyw.js">
    <link rel="modulepreload" href="/assets/chunks/erDiagram-9861fffd.CQSbaoJM.js">
    <link rel="modulepreload" href="/assets/chunks/gitGraphDiagram-72cf32ee.CjLmC8RV.js">
    <link rel="modulepreload" href="/assets/chunks/ganttDiagram-c361ad54.R_V-FeK5.js">
    <link rel="modulepreload" href="/assets/chunks/infoDiagram-f8f76790.C-2Va9KZ.js">
    <link rel="modulepreload" href="/assets/chunks/pieDiagram-8a3498a8.B9ZVkD7K.js">
    <link rel="modulepreload" href="/assets/chunks/quadrantDiagram-120e2f19.BuonnDHi.js">
    <link rel="modulepreload" href="/assets/chunks/xychartDiagram-e933f94c.C_bIYaUn.js">
    <link rel="modulepreload" href="/assets/chunks/requirementDiagram-deff3bca.RFVzvdjl.js">
    <link rel="modulepreload" href="/assets/chunks/sequenceDiagram-704730f1.UZWxMlyq.js">
    <link rel="modulepreload" href="/assets/chunks/classDiagram-70f12bd4.sipmPMFa.js">
    <link rel="modulepreload" href="/assets/chunks/classDiagram-v2-f2320105.CDkLxQ0T.js">
    <link rel="modulepreload" href="/assets/chunks/stateDiagram-587899a1.CD2ocVZB.js">
    <link rel="modulepreload" href="/assets/chunks/stateDiagram-v2-d93cdb3a.D0qUPm3J.js">
    <link rel="modulepreload" href="/assets/chunks/journeyDiagram-49397b02.CeUUZA2l.js">
    <link rel="modulepreload" href="/assets/chunks/flowchart-elk-definition-4a651766.DkdgpMTf.js">
    <link rel="modulepreload" href="/assets/chunks/timeline-definition-85554ec2.WL9yxus9.js">
    <link rel="modulepreload" href="/assets/chunks/mindmap-definition-fc14e90a.CWC2bxmB.js">
    <link rel="modulepreload" href="/assets/chunks/sankeyDiagram-04a897e0.BXj8OViR.js">
    <link rel="modulepreload" href="/assets/chunks/blockDiagram-38ab4fdb.CPVnJXk5.js">
    <link rel="modulepreload" href="/assets/chunks/virtual_mermaid-config.DDnGl6nM.js">
    <link rel="modulepreload" href="/assets/frontend_js基础_正则表达式.md.B0lf2eU9.lean.js">
    <meta name="application-name" content="VuePress">
    <meta name="apple-mobile-web-app-title" content="静思田园">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#3eaf7c">
    <meta name="theme-color" content="#646cff">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-8426fc1a><!--]--><span data-v-1168a8e4>静思田园</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57></span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/network/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>网络工程师</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/frontend/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>前端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/English/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>English</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/Scrupy/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>爬虫</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/backend/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>后端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bigdata/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>大数据</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/computer/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>计算机基础</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/database/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>数据库</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docker/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>dorker</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/git/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Git</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/nodejs/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Node.js</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/python/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Python</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/shell/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>shell</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tools/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>工具</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/loveagri" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/loveagri" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>码云</title><path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/loveagri" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/loveagri" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>码云</title><path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>js基础知识</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js基础/" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>js基础知识</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/DOM.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>DOM</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/Map.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Map</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/Promise.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Promise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/Set.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Set</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/Symbol.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Symbol</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E4%BA%8B%E4%BB%B6.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>事件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>任务管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E5%87%BD%E6%95%B0%E8%BF%9B%E9%98%B6.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>函数进阶</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E7%BB%A7%E6%89%BF.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>原型与继承</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>基本类型</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E5%AF%B9%E8%B1%A1.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>对象</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E5%B8%B8%E7%94%A8%E6%8A%80%E5%B7%A7.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>常用技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>数组类型</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>模块设计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>正则表达式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E7%A9%BA%E9%97%B4%E5%9D%90%E6%A0%87.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>空间坐标</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E7%B1%BB.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>类</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/js%E5%9F%BA%E7%A1%80/%E8%BF%AD%E4%BB%A3%E5%99%A8.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>迭代器</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>目录</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _frontend_js%E5%9F%BA%E7%A1%80_%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F" data-v-39a288b8><div><h1 id="正则表达式" tabindex="-1">正则表达式 <a class="header-anchor" href="#正则表达式" aria-label="Permalink to &quot;正则表达式&quot;">​</a></h1><h2 id="基础知识" tabindex="-1">基础知识 <a class="header-anchor" href="#基础知识" aria-label="Permalink to &quot;基础知识&quot;">​</a></h2><h3 id="创建正则" tabindex="-1">创建正则 <a class="header-anchor" href="#创建正则" aria-label="Permalink to &quot;创建正则&quot;">​</a></h3><h4 id="字面量创建" tabindex="-1">字面量创建 <a class="header-anchor" href="#字面量创建" aria-label="Permalink to &quot;字面量创建&quot;">​</a></h4><p>有变量时使用eval` 转换为 js 语法来实现将变量解析到正则</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;love&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> a</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;v&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#61AFEF;">eval</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">`/</span><span style="color:#C678DD;">${</span><span style="color:#E06C75;">a</span><span style="color:#C678DD;">}</span><span style="color:#98C379;">/`</span><span style="color:#ABB2BF;">).</span><span style="color:#61AFEF;">test</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//true</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="对象创建" tabindex="-1">对象创建 <a class="header-anchor" href="#对象创建" aria-label="Permalink to &quot;对象创建&quot;">​</a></h4><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;dotohi.com&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> web</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;dotohi&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#C678DD;"> new</span><span style="color:#61AFEF;"> RegExp</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">web</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">test</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//true</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="字符转义" tabindex="-1">字符转义 <a class="header-anchor" href="#字符转义" aria-label="Permalink to &quot;字符转义&quot;">​</a></h3><p>使用 <code>RegExp</code> 构建正则时在转义上会有些区别，下面是对象与字面量定义正则时区别</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> price</span><span style="color:#56B6C2;"> =</span><span style="color:#D19A66;"> 12.23</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">//含义1: . 除换行外任何字符   含义2: .普通点</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">//含义1: d 字母d            含义2: \d 数字 0~9</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/\d</span><span style="color:#D19A66;">+</span><span style="color:#56B6C2;">\.</span><span style="color:#E06C75;">\d</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">/</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">test</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">price</span><span style="color:#ABB2BF;">));</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">//字符串中 \d 与 d 是一样的，所以在 new RegExp 时\d 即为 d</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;</span><span style="color:#56B6C2;">\d</span><span style="color:#98C379;">&quot;</span><span style="color:#56B6C2;"> ==</span><span style="color:#98C379;"> &quot;d&quot;</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">//使用对象定义正则时，可以先把字符串打印一样，结果是字面量一样的定义就对了</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;</span><span style="color:#56B6C2;">\\</span><span style="color:#98C379;">d+</span><span style="color:#56B6C2;">\\</span><span style="color:#98C379;">.</span><span style="color:#56B6C2;">\\</span><span style="color:#98C379;">d+&quot;</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#C678DD;"> new</span><span style="color:#61AFEF;"> RegExp</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;</span><span style="color:#56B6C2;">\\</span><span style="color:#98C379;">d+</span><span style="color:#56B6C2;">\\</span><span style="color:#98C379;">.</span><span style="color:#56B6C2;">\\</span><span style="color:#98C379;">d+&quot;</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">test</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">price</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="元子字符" tabindex="-1">元子字符 <a class="header-anchor" href="#元子字符" aria-label="Permalink to &quot;元子字符&quot;">​</a></h2><p>元字符是正则表达式中的最小元素，只代表单一（一个）字符</p><h3 id="字符列表" tabindex="-1">字符列表 <a class="header-anchor" href="#字符列表" aria-label="Permalink to &quot;字符列表&quot;">​</a></h3><table tabindex="0"><thead><tr><th>元字符</th><th>说明</th><th>示例</th></tr></thead><tbody><tr><td>\s</td><td>任意一个空白字符匹配，如空格，制表符<code>\t</code>，换行符<code>\n</code></td><td>[\n\f\r\t\v]</td></tr><tr><td>\S</td><td>除了空白符外任意一个字符匹配</td><td>[^\n\f\r\t\v]</td></tr><tr><td>.</td><td>匹配除换行符外的任意字符</td><td></td></tr></tbody></table><h3 id="所有字符" tabindex="-1">所有字符 <a class="header-anchor" href="#所有字符" aria-label="Permalink to &quot;所有字符&quot;">​</a></h3><p>可以使用 <code>[\s\S]</code> 或 <code>[\d\D]</code> 来匹配所有字符</p><h2 id="模式修饰" tabindex="-1">模式修饰 <a class="header-anchor" href="#模式修饰" aria-label="Permalink to &quot;模式修饰&quot;">​</a></h2><p>正则表达式在执行时会按他们的默认执行方式进行，但有时候默认的处理方式总不能满足我们的需求，所以可以使用模式修正符更改默认方式。</p><table tabindex="0"><thead><tr><th>修饰符</th><th>说明</th></tr></thead><tbody><tr><td>i</td><td>不区分大小写字母的匹配</td></tr><tr><td>g</td><td>全局搜索所有匹配内容</td></tr><tr><td>m</td><td>视为多行</td></tr><tr><td>s</td><td>视为单行忽略换行符，使用<code>.</code> 可以匹配所有字符</td></tr><tr><td>y</td><td>从 <code>regexp.lastIndex</code> 开始匹配</td></tr><tr><td>u</td><td>正确处理四个字符的 UTF-16 编码</td></tr></tbody></table><h3 id="g" tabindex="-1">g <a class="header-anchor" href="#g" aria-label="Permalink to &quot;g&quot;">​</a></h3><p>不加<code>g</code>match的结果</p><p><img src="https://gitlab.com/loveagri/pic/-/raw/main/2024-12-10/20/20731_image-20241210204405875.png" alt="image-20241210204405875" loading="lazy"></p><p>加<code>g</code>match的结果</p><p><img src="https://gitlab.com/loveagri/pic/-/raw/main/2024-12-10/20/919_image-20241210202701264.png" alt="image-20241210202701264" loading="lazy"></p><h3 id="u" tabindex="-1">u <a class="header-anchor" href="#u" aria-label="Permalink to &quot;u&quot;">​</a></h3><p><code>u</code>可以理解为Unicode，每个字符都有属性，如<code>L</code>属性表示是字母，<code>P</code> 表示标点符号，需要结合 <code>u</code> 模式才有效。其他属性简写可以访问 <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt" target="_blank" rel="noreferrer">属性的别名</a> 网站查看。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#7F848E;font-style:italic;">//使用\p{L}属性匹配字母</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;loveagri2010.我爱你，加油！&quot;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/</span><span style="color:#56B6C2;">\p</span><span style="color:#E06C75;">{L}</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">u</span><span style="color:#ABB2BF;">))</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">//使用\p{P}属性匹配标点</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/</span><span style="color:#56B6C2;">\p</span><span style="color:#E06C75;">{P}</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">gu</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>字符也有 unicode 文字系统属性 <code>Script=文字系统</code>，下面是使用 <code>\p{sc=Han}</code> 获取中文字符 <code>han</code>为中文系统，其他语言请查看 <a href="http://www.unicode.org/standard/supported.html" target="_blank" rel="noreferrer">文字语言表</a></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> `</span></span>
<span class="line"><span style="color:#98C379;">张三:010-99999999,李四:020-88888888`</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> res</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/</span><span style="color:#56B6C2;">\p</span><span style="color:#E06C75;">{sc=Han}</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">gu</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">res</span><span style="color:#ABB2BF;">);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>使用 <code>u</code> 模式可以正确处理四个字符的 UTF-16 字节编码</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> str</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;𝒳𝒴&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">table</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">str</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/</span><span style="color:#D19A66;">[𝒳𝒴]</span><span style="color:#E06C75;">/</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//结果为乱字符&quot;�&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">table</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">str</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/</span><span style="color:#D19A66;">[𝒳𝒴]</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">u</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//结果正确 &quot;𝒳&quot;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="lastindex" tabindex="-1">lastIndex <a class="header-anchor" href="#lastindex" aria-label="Permalink to &quot;lastIndex&quot;">​</a></h3><p>RegExp 对象<code>lastIndex</code> 属性可以返回或者设置正则表达式开始匹配的位置</p><ul><li>必须结合 <code>g</code> 修饰符使用</li><li>对 <code>exec</code> 方法有效</li><li>匹配完成时，<code>lastIndex</code> 会被重置为 0</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> `静思田园不断分享视频教程，静思田园网址是 dotohi.com`</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /静思田园(.</span><span style="color:#D19A66;">{2}</span><span style="color:#E06C75;">)/</span><span style="color:#C678DD;">g</span></span>
<span class="line"><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#56B6C2;"> =</span><span style="color:#D19A66;"> 10</span><span style="color:#7F848E;font-style:italic;"> //从索引10开始搜索</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">))</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E06C75;">reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /</span><span style="color:#56B6C2;">\p</span><span style="color:#E06C75;">{sc=Han}/</span><span style="color:#C678DD;">gu</span></span>
<span class="line"><span style="color:#C678DD;">while</span><span style="color:#ABB2BF;"> ((</span><span style="color:#E06C75;">res</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">))) {</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">res</span><span style="color:#ABB2BF;">[</span><span style="color:#D19A66;">0</span><span style="color:#ABB2BF;">])</span></span>
<span class="line"><span style="color:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="y" tabindex="-1">y <a class="header-anchor" href="#y" aria-label="Permalink to &quot;y&quot;">​</a></h3><p>我们来对比使用 <code>y</code> 与<code>g</code> 模式，使用 <code>g</code> 模式会一直匹配字符串</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;udunren&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /u/</span><span style="color:#C678DD;">g</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">));</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">); </span><span style="color:#7F848E;font-style:italic;">//1</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">));</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">); </span><span style="color:#7F848E;font-style:italic;">//3</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//null</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">); </span><span style="color:#7F848E;font-style:italic;">//0</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>但使用<code>y</code> 模式后如果从 <code>lastIndex</code> 开始匹配不成功就不继续匹配了，如果匹配就会一直匹配下去。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;udunren&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /u/</span><span style="color:#C678DD;">y</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">));</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">); </span><span style="color:#7F848E;font-style:italic;">//1</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//null</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">); </span><span style="color:#7F848E;font-style:italic;">//0</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>因为使用 <code>y</code> 模式可以在匹配不到时停止匹配，在匹配下面字符中的 qq 时可以提高匹配效率</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> `我爱你QQ群:11111111,999999999,88888888</span></span>
<span class="line"><span style="color:#98C379;">随便写点，网址是 dotohi.com`</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /(\d</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">),</span><span style="color:#D19A66;">?</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">y</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#56B6C2;"> =</span><span style="color:#D19A66;"> 7</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">while</span><span style="color:#ABB2BF;"> ((</span><span style="color:#E06C75;">res</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">))) </span><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">res</span><span style="color:#ABB2BF;">[</span><span style="color:#D19A66;">1</span><span style="color:#ABB2BF;">]);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="原子表" tabindex="-1">原子表 <a class="header-anchor" href="#原子表" aria-label="Permalink to &quot;原子表&quot;">​</a></h2><p>原子表中有些正则字符不需要转义，如果转义也是没问题的，可以理解为在原子表中<code>.</code> 就是小数点</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> str</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;(dotohi.com)+&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">table</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">str</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/</span><span style="color:#D19A66;">[()</span><span style="color:#E06C75;">.</span><span style="color:#D19A66;">+]</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">g</span><span style="color:#ABB2BF;">));</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">//使用转义也没有问题</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">table</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">str</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/</span><span style="color:#D19A66;">[</span><span style="color:#56B6C2;">\(\)\.\+</span><span style="color:#D19A66;">]</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">g</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="原子组" tabindex="-1">原子组 <a class="header-anchor" href="#原子组" aria-label="Permalink to &quot;原子组&quot;">​</a></h2><p>原子组与原子表的差别在于原子组一次匹配多个元子，而原子表则是匹配任意一个字符</p><h3 id="基本使用" tabindex="-1">基本使用 <a class="header-anchor" href="#基本使用" aria-label="Permalink to &quot;基本使用&quot;">​</a></h3><p>没有添加 <code>g</code> 模式修正符时只匹配到第一个，匹配到的信息包含以下数据</p><table tabindex="0"><thead><tr><th>变量</th><th>说明</th></tr></thead><tbody><tr><td>0</td><td>匹配到的完整内容</td></tr><tr><td>1,2....</td><td>匹配到的原子组</td></tr><tr><td>index</td><td>原字符串中的位置</td></tr><tr><td>input</td><td>原字符串</td></tr><tr><td>groups</td><td>命名分组</td></tr></tbody></table><p>在<code>match</code>中使用原子组匹配，会将每个组数据返回到结果中</p><ul><li>0 为匹配到的整个匹配正则表达式的完整内容</li><li>1/2 ...等 为原子级内容</li><li>index 匹配的开始位置</li><li>input 原始数据</li><li>groups 组别名</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;houdunren.com&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/houdun(ren)</span><span style="color:#56B6C2;">\.</span><span style="color:#E06C75;">(com)/</span><span style="color:#ABB2BF;">));</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">//[&quot;houdunren.com&quot;, &quot;ren&quot;, &quot;com&quot;, index: 0, input: &quot;houdunren.com&quot;, groups: undefined]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>下面使用原子组匹配标题元素</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> `</span></span>
<span class="line"><span style="color:#98C379;">  &lt;h1&gt;linux&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#98C379;">  &lt;span&gt;php&lt;/span&gt;</span></span>
<span class="line"><span style="color:#98C379;">  &lt;h2&gt;java&lt;/h2&gt;</span></span>
<span class="line"><span style="color:#98C379;">`</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">table</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/&lt;(h</span><span style="color:#D19A66;">[1-6]</span><span style="color:#E06C75;">)</span><span style="color:#D19A66;">[</span><span style="color:#E06C75;">\s\S</span><span style="color:#D19A66;">]*</span><span style="color:#E06C75;">&lt;</span><span style="color:#56B6C2;">\/</span><span style="color:#C678DD;">\1</span><span style="color:#E06C75;">&gt;/</span><span style="color:#C678DD;">g</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="引用分组" tabindex="-1">引用分组 <a class="header-anchor" href="#引用分组" aria-label="Permalink to &quot;引用分组&quot;">​</a></h3><p><code>\n</code> 在匹配时引用原子组， <code>$n</code> 指在替换时使用匹配的组数据。下面将标签替换为<code>p</code>标签</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> `</span></span>
<span class="line"><span style="color:#98C379;">  &lt;h1&gt;linux&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#98C379;">  &lt;span&gt;php&lt;/span&gt;</span></span>
<span class="line"><span style="color:#98C379;">  &lt;h2&gt;java&lt;/h2&gt;</span></span>
<span class="line"><span style="color:#98C379;">`</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /&lt;(h</span><span style="color:#D19A66;">[1-6]</span><span style="color:#E06C75;">)&gt;(</span><span style="color:#D19A66;">[</span><span style="color:#E06C75;">\s\S</span><span style="color:#D19A66;">]*</span><span style="color:#E06C75;">)&lt;</span><span style="color:#56B6C2;">\/</span><span style="color:#C678DD;">\1</span><span style="color:#E06C75;">&gt;/</span><span style="color:#C678DD;">gi</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">replace</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">, </span><span style="color:#98C379;">`&lt;p&gt;$2&lt;/p&gt;`</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>如果只希望组参与匹配，便不希望返回到结果中使用 <code>(?:</code> 处理。下面是获取所有域名的示例</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> str</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> `</span></span>
<span class="line"><span style="color:#98C379;">https://www.baidu.com</span></span>
<span class="line"><span style="color:#98C379;">http://jd.com</span></span>
<span class="line"><span style="color:#98C379;">https://cc.com</span></span>
<span class="line"><span style="color:#98C379;">`</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> dd</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /https</span><span style="color:#D19A66;">?</span><span style="color:#E06C75;">:</span><span style="color:#56B6C2;">\/\/</span><span style="color:#E06C75;">((?:\w</span><span style="color:#D19A66;">+</span><span style="color:#56B6C2;">\.</span><span style="color:#E06C75;">)</span><span style="color:#D19A66;">?</span><span style="color:#E06C75;">\w</span><span style="color:#D19A66;">+</span><span style="color:#56B6C2;">\.</span><span style="color:#E06C75;">(?:com</span><span style="color:#ABB2BF;">|</span><span style="color:#E06C75;">org</span><span style="color:#ABB2BF;">|</span><span style="color:#E06C75;">cn))/</span><span style="color:#C678DD;">gi</span></span>
<span class="line"><span style="color:#C678DD;">while</span><span style="color:#ABB2BF;"> ((</span><span style="color:#E06C75;">v</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> dd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">str</span><span style="color:#ABB2BF;">))) {</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">dir</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">v</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><img src="https://gitlab.com/loveagri/pic/-/raw/main/2024-12-10/21/33676_image-20241210215924699.png" alt="image-20241210215924699" loading="lazy"></p><h3 id="分组别名" tabindex="-1">分组别名 <a class="header-anchor" href="#分组别名" aria-label="Permalink to &quot;分组别名&quot;">​</a></h3><p>如果希望返回的组数据更清晰，可以为原子组编号，结果将保存在返回的 <code>groups</code>字段中</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;&lt;h1&gt;dotohi.com&lt;/h1&gt;&quot;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">dir</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/&lt;(?&lt;tag&gt;h</span><span style="color:#D19A66;">[1-6]</span><span style="color:#E06C75;">)</span><span style="color:#D19A66;">[</span><span style="color:#E06C75;">\s\S</span><span style="color:#D19A66;">]*</span><span style="color:#E06C75;">&lt;</span><span style="color:#56B6C2;">\/</span><span style="color:#C678DD;">\1</span><span style="color:#E06C75;">&gt;/</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><img src="https://gitlab.com/loveagri/pic/-/raw/main/2024-12-10/22/22504_image-20241210220047272.png" alt="image-20241210220047272" loading="lazy"></p><p>组别名使用 <code>?&lt;&gt;</code> 形式定义，下面将标签替换为<code>p</code>标签</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> `</span></span>
<span class="line"><span style="color:#98C379;">&lt;h1&gt;linux&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#98C379;">&lt;span&gt;php&lt;/span&gt;</span></span>
<span class="line"><span style="color:#98C379;">&lt;h2&gt;java&lt;/h2&gt;</span></span>
<span class="line"><span style="color:#98C379;">`</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /&lt;(?&lt;tag&gt;h</span><span style="color:#D19A66;">[1-6]</span><span style="color:#E06C75;">)&gt;(?&lt;con&gt;</span><span style="color:#D19A66;">[</span><span style="color:#E06C75;">\s\S</span><span style="color:#D19A66;">]*</span><span style="color:#E06C75;">)&lt;</span><span style="color:#56B6C2;">\/</span><span style="color:#C678DD;">\1</span><span style="color:#E06C75;">&gt;/</span><span style="color:#C678DD;">gi</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">replace</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">, </span><span style="color:#98C379;">`&lt;p&gt;$&lt;con&gt;&lt;/p&gt;`</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>示例：</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://www.baidu.com&quot;</span><span style="color:#ABB2BF;">&gt;百度&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://www.jd.com&quot;</span><span style="color:#ABB2BF;">&gt;京东&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://www.mi.com.cn&quot;</span><span style="color:#ABB2BF;">&gt;小米&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#C678DD;">    let</span><span style="color:#E06C75;"> body</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">innerHTML</span></span>
<span class="line"><span style="color:#C678DD;">    let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /&lt;a\s</span><span style="color:#D19A66;">*</span><span style="color:#E06C75;">.</span><span style="color:#D19A66;">+?</span><span style="color:#E06C75;">(?&lt;link&gt;https</span><span style="color:#D19A66;">?</span><span style="color:#E06C75;">:</span><span style="color:#56B6C2;">\/\/</span><span style="color:#E06C75;">(\w</span><span style="color:#D19A66;">+</span><span style="color:#56B6C2;">\.</span><span style="color:#E06C75;">)</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">(com</span><span style="color:#ABB2BF;">|</span><span style="color:#E06C75;">org</span><span style="color:#ABB2BF;">|</span><span style="color:#E06C75;">cc</span><span style="color:#ABB2BF;">|</span><span style="color:#E06C75;">cn)).</span><span style="color:#D19A66;">*</span><span style="color:#E06C75;">&gt;(?&lt;title&gt;.</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">)&lt;</span><span style="color:#56B6C2;">\/</span><span style="color:#E06C75;">a&gt;/</span><span style="color:#C678DD;">gi</span></span>
<span class="line"><span style="color:#C678DD;">    const</span><span style="color:#E5C07B;"> links</span><span style="color:#56B6C2;"> =</span><span style="color:#ABB2BF;"> []</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">([...</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">matchAll</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">)].</span><span style="color:#61AFEF;">map</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;font-style:italic;">item</span><span style="color:#C678DD;"> =&gt;</span><span style="color:#E5C07B;"> item</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">groups</span><span style="color:#ABB2BF;">));</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="禁止贪婪" tabindex="-1">禁止贪婪 <a class="header-anchor" href="#禁止贪婪" aria-label="Permalink to &quot;禁止贪婪&quot;">​</a></h3><table tabindex="0"><thead><tr><th>使用</th><th>说明</th></tr></thead><tbody><tr><td>*?</td><td>重复任意次，但尽可能少重复</td></tr><tr><td>+?</td><td>重复 1 次或更多次，但尽可能少重复</td></tr><tr><td><span style="color:red;">??</span></td><td>重复 0 次或 1 次，但尽可能少重复</td></tr><tr><td>{n,m}?</td><td>重复 n 到 m 次，但尽可能少重复</td></tr><tr><td>{n,}?</td><td>重复 n 次以上，但尽可能少重复</td></tr></tbody></table><h2 id="全局匹配" tabindex="-1">全局匹配 <a class="header-anchor" href="#全局匹配" aria-label="Permalink to &quot;全局匹配&quot;">​</a></h2><h3 id="match" tabindex="-1">match <a class="header-anchor" href="#match" aria-label="Permalink to &quot;match&quot;">​</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;百度&lt;/</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;京东&lt;/</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;小米&lt;/</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#C678DD;">    function</span><span style="color:#61AFEF;"> elem</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;font-style:italic;">tag</span><span style="color:#ABB2BF;">,</span><span style="color:#E06C75;font-style:italic;">r</span><span style="color:#56B6C2;">=</span><span style="color:#98C379;">&#39;&#39;</span><span style="color:#ABB2BF;">) {</span></span>
<span class="line"><span style="color:#C678DD;">        const</span><span style="color:#E5C07B;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#C678DD;"> new</span><span style="color:#61AFEF;"> RegExp</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;&lt;(&quot;</span><span style="color:#56B6C2;"> +</span><span style="color:#E06C75;"> tag</span><span style="color:#56B6C2;"> +</span><span style="color:#98C379;"> &quot;)&gt;.+?&lt;</span><span style="color:#56B6C2;">\.\\</span><span style="color:#98C379;">1&gt;&quot;</span><span style="color:#ABB2BF;">,</span><span style="color:#E06C75;">r</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#C678DD;">        return</span><span style="color:#E5C07B;"> document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">innerHTML</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#ABB2BF;">    }</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#61AFEF;">elem</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;h1&quot;</span><span style="color:#ABB2BF;">));</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>无<code>g</code>和<code>g</code>结果</p><p><img src="https://gitlab.com/loveagri/pic/-/raw/main/2024-12-10/22/62937_image-20241210224608738.png" alt="image-20241210224608738" loading="lazy"></p><h3 id="matchall" tabindex="-1">matchAll <a class="header-anchor" href="#matchall" aria-label="Permalink to &quot;matchAll&quot;">​</a></h3><p>在新浏览器中支持使用 <code>matchAll</code> 操作，并返回迭代对象，需要添加 <code>g</code> 修饰符</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;百度&lt;/</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;京东&lt;/</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;小米&lt;/</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#C678DD;">    const</span><span style="color:#E5C07B;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#C678DD;"> new</span><span style="color:#61AFEF;"> RegExp</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;&lt;(?&lt;tag&gt;h[1-6])&gt;(.+?)&lt;</span><span style="color:#56B6C2;">\/\\</span><span style="color:#98C379;">1&gt;&quot;</span><span style="color:#ABB2BF;">, </span><span style="color:#98C379;">&quot;g&quot;</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#C678DD;">    let</span><span style="color:#E06C75;"> iterators</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">innerHTML</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">matchAll</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD;">    for</span><span style="color:#ABB2BF;"> (</span><span style="color:#C678DD;">const</span><span style="color:#E5C07B;"> iterator</span><span style="color:#C678DD;"> of</span><span style="color:#E06C75;"> iterators</span><span style="color:#ABB2BF;">) {</span></span>
<span class="line"><span style="color:#E5C07B;">        console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">iterator</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#ABB2BF;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">  	//另两种种迭代遍历方式</span></span>
<span class="line"><span style="color:#C678DD;">    while</span><span style="color:#ABB2BF;"> ((</span><span style="color:#E06C75;">data</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> iterators</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">next</span><span style="color:#ABB2BF;">().</span><span style="color:#E06C75;">value</span><span style="color:#ABB2BF;">)) {</span></span>
<span class="line"><span style="color:#E5C07B;">        console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">data</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#ABB2BF;">    }</span></span>
<span class="line"><span style="color:#ABB2BF;">  </span></span>
<span class="line"><span style="color:#C678DD;">    while</span><span style="color:#ABB2BF;"> (({ </span><span style="color:#E06C75;">done</span><span style="color:#ABB2BF;">, </span><span style="color:#E06C75;">value</span><span style="color:#ABB2BF;"> } </span><span style="color:#56B6C2;">=</span><span style="color:#E5C07B;"> iterators</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">next</span><span style="color:#ABB2BF;">()) </span><span style="color:#56B6C2;">&amp;&amp;</span><span style="color:#56B6C2;"> !</span><span style="color:#E06C75;">done</span><span style="color:#ABB2BF;">) {</span></span>
<span class="line"><span style="color:#E5C07B;">        console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">value</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#ABB2BF;">    }</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p>![image-20241210230647265](/Users/press/Library/Application Support/typora-user-images/image-20241210230647265.png)</p><h3 id="exec" tabindex="-1">exec <a class="header-anchor" href="#exec" aria-label="Permalink to &quot;exec&quot;">​</a></h3><p><strong><code>exec()</code></strong> 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或null。在设置了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global" target="_blank" rel="noreferrer"><code>global</code></a> 或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky" target="_blank" rel="noreferrer"><code>sticky</code></a> 标志位的情况下（如 <code>/foo/g</code> 或 <code>/foo/y</code>），JavaScript <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp" target="_blank" rel="noreferrer"><code>RegExp</code></a> 对象是<em>有状态</em>的。它们会将上次成功匹配后的位置记录在 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex" target="_blank" rel="noreferrer"><code>lastIndex</code></a> 属性中。如果最后一个未匹配到，则lastIndex会被置为0。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;百度&lt;/</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;京东&lt;/</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;小米&lt;/</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#C678DD;">    const</span><span style="color:#E5C07B;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#C678DD;"> new</span><span style="color:#61AFEF;"> RegExp</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;&lt;(?&lt;tag&gt;h[1-6])&gt;(.+?)&lt;</span><span style="color:#56B6C2;">\/\\</span><span style="color:#98C379;">1&gt;&quot;</span><span style="color:#ABB2BF;">, </span><span style="color:#98C379;">&quot;g&quot;</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#C678DD;">    let</span><span style="color:#E06C75;"> iterators</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">innerHTML</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">iterators</span><span style="color:#ABB2BF;">, </span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#E06C75;">    iterators</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">innerHTML</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">iterators</span><span style="color:#ABB2BF;">, </span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#E06C75;">    iterators</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">innerHTML</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">iterators</span><span style="color:#ABB2BF;">, </span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#E06C75;">    iterators</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">innerHTML</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">iterators</span><span style="color:#ABB2BF;">, </span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">lastIndex</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><img src="https://gitlab.com/loveagri/pic/-/raw/main/2024-12-10/23/98647_image-20241210235525395.png" alt="image-20241210235525395" loading="lazy"></p><p>如果 <code>d</code> 标志被使用，则 <code>RegExp.prototype.hasIndices</code> 的值是 <code>true</code>；否则是 <code>false</code>。<code>d</code> 标志表示正则表达式匹配的结果应该包含每个捕获组子字符串开始和结束的索引。它不会以任何方式改变正则表达式的解释或匹配行为，它只在匹配的结果中提供额外的信息。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">const</span><span style="color:#E5C07B;"> str1</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;foo bar foo&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD;">const</span><span style="color:#E5C07B;"> regex1</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /foo/</span><span style="color:#C678DD;">dg</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">regex1</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">hasIndices</span><span style="color:#ABB2BF;">) </span><span style="color:#7F848E;font-style:italic;">// Output: true</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">regex1</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">str1</span><span style="color:#ABB2BF;">).</span><span style="color:#E06C75;">indices</span><span style="color:#ABB2BF;">[</span><span style="color:#D19A66;">0</span><span style="color:#ABB2BF;">]) </span><span style="color:#7F848E;font-style:italic;">// Output: Array [0, 3]</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">regex1</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">str1</span><span style="color:#ABB2BF;">).</span><span style="color:#E06C75;">indices</span><span style="color:#ABB2BF;">[</span><span style="color:#D19A66;">0</span><span style="color:#ABB2BF;">]) </span><span style="color:#7F848E;font-style:italic;">// Output: Array [8, 11]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD;">const</span><span style="color:#E5C07B;"> str2</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;foo bar foo&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD;">const</span><span style="color:#E5C07B;"> regex2</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /foo/</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">regex2</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">hasIndices</span><span style="color:#ABB2BF;">) </span><span style="color:#7F848E;font-style:italic;">// Output: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">regex2</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">str2</span><span style="color:#ABB2BF;">).</span><span style="color:#E06C75;">indices</span><span style="color:#ABB2BF;">) </span><span style="color:#7F848E;font-style:italic;">// Output: undefined</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="字符方法" tabindex="-1">字符方法 <a class="header-anchor" href="#字符方法" aria-label="Permalink to &quot;字符方法&quot;">​</a></h2><h3 id="search" tabindex="-1">search <a class="header-anchor" href="#search" aria-label="Permalink to &quot;search&quot;">​</a></h3><p>search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索，返回值为索引位置</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> str</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;dotohi.com&quot;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">str</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">search</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;.com&quot;</span><span style="color:#ABB2BF;">))</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">str</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">search</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/</span><span style="color:#56B6C2;">\.</span><span style="color:#E06C75;">com/</span><span style="color:#C678DD;">i</span><span style="color:#ABB2BF;">));</span><span style="color:#7F848E;font-style:italic;">//6</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="match-1" tabindex="-1">match <a class="header-anchor" href="#match-1" aria-label="Permalink to &quot;match&quot;">​</a></h3><p>直接使用字符串或者正则搜索，如果使用 <code>g</code> 修饰符时，就不会有结果的详细信息了（可以使用 exec），下面是获取所有 h1~6 的标题元素</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> body</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">innerHTML</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> result</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> body</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/&lt;(h</span><span style="color:#D19A66;">[1-6]</span><span style="color:#E06C75;">)&gt;</span><span style="color:#D19A66;">[</span><span style="color:#E06C75;">\s\S</span><span style="color:#D19A66;">]+?</span><span style="color:#E06C75;">&lt;</span><span style="color:#56B6C2;">\/</span><span style="color:#C678DD;">\1</span><span style="color:#E06C75;">&gt;/</span><span style="color:#C678DD;">g</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">table</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">result</span><span style="color:#ABB2BF;">);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="matchall-1" tabindex="-1">matchAll <a class="header-anchor" href="#matchall-1" aria-label="Permalink to &quot;matchAll&quot;">​</a></h3><p>在新浏览器中支持使用 <code>matchAll</code> 操作，并返回迭代对象</p><h3 id="replace" tabindex="-1">replace <a class="header-anchor" href="#replace" aria-label="Permalink to &quot;replace&quot;">​</a></h3><p><code>replace</code> 方法不仅可以执行基本字符替换，也可以进行正则替换</p><p>替换字符串可以插入下面的特殊变量名:</p><table tabindex="0"><thead><tr><th>变量</th><th>说明</th></tr></thead><tbody><tr><td><code>$$</code></td><td>插入一个 &quot;$&quot;。</td></tr><tr><td><code>$&amp;</code></td><td>插入匹配的子串。</td></tr><tr><td><code>$`</code></td><td>插入当前匹配的子串左边的内容。</td></tr><tr><td><code>$&#39;</code></td><td>插入当前匹配的子串右边的内容。</td></tr><tr><td><code>$n</code></td><td>假如第一个参数是 <code>RegExp</code> 对象，并且 n 是个小于 100 的非负整数，那么插入第 n 个括号匹配的字符串。提示:索引是从 1 开始</td></tr></tbody></table><p>在love前后添加三个<code>=</code>，<code>$`</code>、<code>$&#39;</code></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;=love=&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">replace</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/love/</span><span style="color:#C678DD;">g</span><span style="color:#ABB2BF;">, </span><span style="color:#98C379;">&quot;$`$`$&amp;$&#39;$&#39;&quot;</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>把电话号用 <code>-</code> 连接，<code>$n</code>的使用。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;(010)99999999 (020)8888888&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">replace</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/</span><span style="color:#56B6C2;">\(</span><span style="color:#E06C75;">(\d</span><span style="color:#D19A66;">{3,4}</span><span style="color:#E06C75;">)</span><span style="color:#56B6C2;">\)</span><span style="color:#E06C75;">(\d</span><span style="color:#D19A66;">{7,8}</span><span style="color:#E06C75;">)/</span><span style="color:#C678DD;">g</span><span style="color:#ABB2BF;">, </span><span style="color:#98C379;">&quot;$1-$2&quot;</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>把所有<code>教育</code>汉字加上链接</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  在线教育是一种高效的学习方式，教育是一生的事业</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  const body = document.body;</span></span>
<span class="line"><span style="color:#ABB2BF;">  body.innerHTML = body.innerHTML.replace(</span></span>
<span class="line"><span style="color:#ABB2BF;">    /教育/g,</span></span>
<span class="line"><span style="color:#ABB2BF;">    `&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;font-style:italic;"> href</span><span style="color:#56B6C2;">=</span><span style="color:#98C379;">&quot;https://www.dotohi.com&quot;</span><span style="color:#ABB2BF;">&gt;$&amp;&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;`</span></span>
<span class="line"><span style="color:#ABB2BF;">  );</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>为链接添加上<code>https</code> ，并补全 <code>www.</code></p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">main</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;color:red&quot;</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;http://www.face.com&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">          开源系统</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;l1&quot;</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;http://dd.com&quot;</span><span style="color:#ABB2BF;">&gt;滴滴&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;http://yahoo.com&quot;</span><span style="color:#ABB2BF;">&gt;雅虎&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">h4</span><span style="color:#ABB2BF;">&gt;http://www.hdcms.com&lt;/</span><span style="color:#E06C75;">h4</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">main</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E5C07B;">  document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">innerHTML</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">innerHTML</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">replace</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">/(&lt;a.</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">href=</span><span style="color:#D19A66;">[&quot;&#39;]</span><span style="color:#E06C75;">)(?&lt;https&gt;https</span><span style="color:#D19A66;">?</span><span style="color:#E06C75;">)(:</span><span style="color:#56B6C2;">\/\/</span><span style="color:#E06C75;">)(?&lt;www&gt;www</span><span style="color:#56B6C2;">\.</span><span style="color:#E06C75;">)</span><span style="color:#D19A66;">?</span><span style="color:#E06C75;">(.</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">)(</span><span style="color:#D19A66;">[&quot;&#39;]</span><span style="color:#E06C75;">.</span><span style="color:#D19A66;">*</span><span style="color:#E06C75;">&gt;)/</span><span style="color:#C678DD;">gm</span><span style="color:#ABB2BF;">, (</span><span style="color:#E06C75;font-style:italic;">v</span><span style="color:#ABB2BF;">, ...</span><span style="color:#E06C75;font-style:italic;">arg</span><span style="color:#ABB2BF;">) </span><span style="color:#C678DD;">=&gt;</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#E06C75;">      arg</span><span style="color:#ABB2BF;">[</span><span style="color:#D19A66;">1</span><span style="color:#ABB2BF;">] </span><span style="color:#56B6C2;">=</span><span style="color:#98C379;"> &#39;https&#39;</span></span>
<span class="line"><span style="color:#E06C75;">      arg</span><span style="color:#ABB2BF;">[</span><span style="color:#D19A66;">3</span><span style="color:#ABB2BF;">] </span><span style="color:#56B6C2;">=</span><span style="color:#98C379;"> &#39;www.&#39;</span></span>
<span class="line"><span style="color:#C678DD;">      return</span><span style="color:#E5C07B;"> arg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">splice</span><span style="color:#ABB2BF;">(</span><span style="color:#D19A66;">0</span><span style="color:#ABB2BF;">, </span><span style="color:#D19A66;">6</span><span style="color:#ABB2BF;">).</span><span style="color:#61AFEF;">join</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&#39;&#39;</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#ABB2BF;">  });</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h2 id="正则方法" tabindex="-1">正则方法 <a class="header-anchor" href="#正则方法" aria-label="Permalink to &quot;正则方法&quot;">​</a></h2><h3 id="test" tabindex="-1">test <a class="header-anchor" href="#test" aria-label="Permalink to &quot;test&quot;">​</a></h3><p><strong><code>test()</code></strong> 方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 <code>true</code> 或 <code>false</code>。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> str</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;hello world!&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> result</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /</span><span style="color:#C678DD;">^</span><span style="color:#E06C75;">hello/</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">test</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">str</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">result</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">// true</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="exec-1" tabindex="-1">exec <a class="header-anchor" href="#exec-1" aria-label="Permalink to &quot;exec&quot;">​</a></h3><p>不使用 <code>g</code> 修饰符时与 <code>match</code> 方法使用相似，使用 <code>g</code> 修饰符后可以循环调用直到全部匹配完。</p><ul><li>使用 <code>g</code> 修饰符多次操作时使用同一个正则，即把正则定义为变量使用</li><li>使用 <code>g</code> 修饰符最后匹配不到时返回 <code>null</code></li></ul><h2 id="断言匹配" tabindex="-1">断言匹配 <a class="header-anchor" href="#断言匹配" aria-label="Permalink to &quot;断言匹配&quot;">​</a></h2><p>断言虽然写在扩号中但它不是组，所以不会在匹配结果中保存，可以将断言理解为正则中的条件。</p><h3 id="exp" tabindex="-1">(?=exp) <a class="header-anchor" href="#exp" aria-label="Permalink to &quot;(?=exp)&quot;">​</a></h3><p><strong>零宽先行断言</strong> <code>?=exp</code> 匹配后面为 <code>exp</code> 的内容</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">var</span><span style="color:#E06C75;"> str</span><span style="color:#56B6C2;">=</span><span style="color:#98C379;">&quot;abZW863&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">var</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;">=</span><span style="color:#E06C75;">/ab(?=</span><span style="color:#D19A66;">[A-Z]</span><span style="color:#E06C75;">)/</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">str</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">));</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>下面是将价格后面 添加上 <code>.00</code></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  let lessons = `</span></span>
<span class="line"><span style="color:#ABB2BF;">    js,200元,300次</span></span>
<span class="line"><span style="color:#ABB2BF;">    php,300.00元,100次</span></span>
<span class="line"><span style="color:#ABB2BF;">    node.js,180元,260次</span></span>
<span class="line"><span style="color:#ABB2BF;">  `;</span></span>
<span class="line"><span style="color:#ABB2BF;">  let reg = /(\d+)(.00)?(?=元)/gi;</span></span>
<span class="line"><span style="color:#ABB2BF;">  lessons = lessons.replace(reg, (v, ...args) =&gt; </span><span style="color:#C678DD;">{</span></span>
<span class="line"><span style="color:#E06C75;">    args</span><span style="color:#ABB2BF;">[</span><span style="color:#D19A66;">1</span><span style="color:#ABB2BF;">] </span><span style="color:#56B6C2;">=</span><span style="color:#E06C75;"> args</span><span style="color:#ABB2BF;">[</span><span style="color:#D19A66;">1</span><span style="color:#ABB2BF;">] </span><span style="color:#56B6C2;">||</span><span style="color:#98C379;"> &quot;.00&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E06C75;">    return</span><span style="color:#E5C07B;"> args</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">splice</span><span style="color:#ABB2BF;">(</span><span style="color:#D19A66;">0</span><span style="color:#ABB2BF;">, </span><span style="color:#D19A66;">2</span><span style="color:#ABB2BF;">).</span><span style="color:#61AFEF;">join</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;&quot;</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#C678DD;">  }</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#ABB2BF;">  console.log(lessons);</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="exp-1" tabindex="-1">(?&lt;=exp) <a class="header-anchor" href="#exp-1" aria-label="Permalink to &quot;(?&lt;=exp)&quot;">​</a></h3><p><strong>零宽后行断言</strong> <code>?&lt;=exp</code> 匹配前面为 <code>exp</code> 的内容</p><p>匹配前面是<code>love</code> 的数字</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;love789lovely666&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /(?&lt;=love)\d</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">i</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//789</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>匹配前后都是数字的内容</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">    let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;love789lovely666&quot;</span></span>
<span class="line"><span style="color:#C678DD;">    let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /(?&lt;=\d)</span><span style="color:#D19A66;">[[a-zA-Z]+</span><span style="color:#E06C75;">(?=\d)/</span><span style="color:#C678DD;">gi</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">hd</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">)) </span><span style="color:#7F848E;font-style:italic;">//lovely</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意<code>\1</code>对应的匹配对象。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://baidu.com&quot;</span><span style="color:#ABB2BF;">&gt;百度&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://yahoo.com&quot;</span><span style="color:#ABB2BF;">&gt;雅虎&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#C678DD;">    const</span><span style="color:#E5C07B;"> body</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> document</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">body</span></span>
<span class="line highlighted"><span style="color:#C678DD;">    let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /(?&lt;=&lt;a.</span><span style="color:#D19A66;">*</span><span style="color:#E06C75;">href=(</span><span style="color:#D19A66;">[&#39;&quot;]</span><span style="color:#E06C75;">)).</span><span style="color:#D19A66;">+?</span><span style="color:#E06C75;">(?=</span><span style="color:#C678DD;">\1</span><span style="color:#E06C75;">)/</span><span style="color:#C678DD;">gi</span></span>
<span class="line"><span style="color:#E5C07B;">    console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">body</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">innerHTML</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">))</span></span>
<span class="line"><span style="color:#E5C07B;">    body</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">innerHTML</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> body</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">innerHTML</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">replace</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">, </span><span style="color:#98C379;">&quot;https://dotohi.com&quot;</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="exp-2" tabindex="-1">(?!exp) <a class="header-anchor" href="#exp-2" aria-label="Permalink to &quot;(?!exp)&quot;">​</a></h3><p><strong>零宽负向先行断言</strong> 后面不能出现 <code>exp</code> 指定的内容</p><p>使用 <code>(?!exp)</code>字母后面不能为两位数字</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;love12&quot;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /</span><span style="color:#D19A66;">[a-z]+</span><span style="color:#E06C75;">(?!\d</span><span style="color:#D19A66;">{2}</span><span style="color:#E06C75;">)</span><span style="color:#C678DD;">$</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">i</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">table</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//null</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>不能出现<code>you</code></p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">main</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;text&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;username&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;/</span><span style="color:#E06C75;">main</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#C678DD;">    const</span><span style="color:#E5C07B;"> input</span><span style="color:#56B6C2;"> =</span><span style="color:#E5C07B;"> document</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">querySelector</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">`[name=&quot;username&quot;]`</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#E5C07B;">    input</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">addEventListener</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&quot;keyup&quot;</span><span style="color:#ABB2BF;">, </span><span style="color:#C678DD;">function</span><span style="color:#ABB2BF;"> () {</span></span>
<span class="line"><span style="color:#C678DD;">        const</span><span style="color:#E5C07B;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /</span><span style="color:#C678DD;">^</span><span style="color:#E06C75;">(?!.</span><span style="color:#D19A66;">*</span><span style="color:#E06C75;">you.</span><span style="color:#D19A66;">*</span><span style="color:#E06C75;">)</span><span style="color:#D19A66;">[a-z]{8,13}</span><span style="color:#C678DD;">$</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">i</span></span>
<span class="line"><span style="color:#E5C07B;">        console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">this</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">value</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">match</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">reg</span><span style="color:#ABB2BF;">))</span></span>
<span class="line"><span style="color:#ABB2BF;">    });</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="" tabindex="-1">(?&lt;!) <a class="header-anchor" href="#" aria-label="Permalink to &quot;(?&lt;!)&quot;">​</a></h3><p><strong>零宽负向后行断言</strong> <strong>前面不能出现 exp 指定的内容</strong></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> hd</span><span style="color:#56B6C2;"> =</span><span style="color:#98C379;"> &quot;love99you&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#C678DD;">let</span><span style="color:#E06C75;"> reg</span><span style="color:#56B6C2;"> =</span><span style="color:#E06C75;"> /(?&lt;!\d</span><span style="color:#D19A66;">+</span><span style="color:#E06C75;">)</span><span style="color:#D19A66;">[a-z]+</span><span style="color:#E06C75;">/</span><span style="color:#C678DD;">ig</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//love</span></span>
<span class="line"><span style="color:#E5C07B;">console</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">log</span><span style="color:#ABB2BF;">(</span><span style="color:#E5C07B;">reg</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">exec</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">hd</span><span style="color:#ABB2BF;">)); </span><span style="color:#7F848E;font-style:italic;">//ou</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新: <time datetime="2024-12-30T14:20:32.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/frontend/js%E5%9F%BA%E7%A1%80/%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>上一篇</span><span class="title" data-v-e257564d>模块设计</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/frontend/js%E5%9F%BA%E7%A1%80/%E7%A9%BA%E9%97%B4%E5%9D%90%E6%A0%87.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>下一篇</span><span class="title" data-v-e257564d>空间坐标</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    
    
  </body>
</html>